<template>
	<view class="avatar-com flex-juscon-bet flex-ali-center">
		<view class="avatr-nick-wrap flex-ali-center flex-juscon-bet" @click="clickAvatr">
			<image class="avatr-img"  :src="avatarUrl" mode="aspectFit"></image>
			<view class="nick-name-wrap">
				<view class="nick-name" :style="{'fontSize' : nickNameSizeTopx + 'px'}">{{nickname}}</view>
				<slot name="nickNameBelow">
					<view v-if="showPostedTime" class="posted-time">{{formatTime(time)}}</view>
				</slot>
			</view>
		</view>
		<slot>
			<view name="right" v-if="showAttention" @click="clickRight" class="attention-btn">+关注</view>
		</slot>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props:{
			showAttention:{
				type: Boolean,
				default:true
			},
			showPostedTime:{
				type: Boolean,
				default:true
			},
			nickNameSize:{
				type:Number,
				default:24
			},
			avatarUrl:{
				type:String,
				default:""
			},
			time:{
				type:String,
				default:""
			},
			nickname:{
				type:String,
				default:'~神秘人~'
			}
		},
		computed:{
			nickNameSizeTopx(){
				return uni.upx2px(this.nickNameSize)
			}
		},
		filters:{
			
		},
		methods:{
			clickRight(){
				this.$emit('clickAttention')
			},
			clickAvatr(){
				this.$emit("clickAvatr")
			},
			formatTime(time){
				return this.$utils.dateTime(time)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-com{
		.avatr-nick-wrap{
			.avatr-img{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.nick-name-wrap{
				margin-left: 10rpx;
				.nick-name{
					font-size: 24rpx;
					color: #333;
				}
				.posted-time{
					font-size: 16rpx;
					color: #999999;
				}
			}
		}
		.attention-btn{
			margin-right: 40rpx;
			padding: 10rpx 20rpx;
			font-size: 20rpx;
			background-color: $fun-theme-color;
			color: #333333;
			border-radius: 10rpx;
			
		}
	}
</style>
